<template>
  <div class="loginPage">
    <router-view />
    <div
      id="myBtn"
      style="
        position: absolute;
        z-index: 1001;
        bottom: 0;
        right: 0;
        width: 200px;
        height: 60px;
        background-color: rgba(255, 255, 255, 0);
      "
    />
    <language v-if="i18n" class="langSet" />
    <developers
      v-if="developerModeVisible"
      style="position: absolute; z-index: 10000; bottom: 40px; right: 40px"
      @closeMode="closeMode"
    />
    <div class="copyright">
      {{ copyright }}
    </div>
  </div>
</template>
<script>
import Developers from './components/Developers'
import Language from './components/Language'
import Mix from '@/mixins/module'
import { mapGetters } from 'vuex'
import * as types from '@/store/Getter/getterTypes'
import { developerMode, developerPwd } from '@/config'

export default {
  name: 'Login',
  components: {
    Developers,
    Language
  },
  mixins: [Mix],
  data() {
    return {
      developerModeVisible: 0,
      count: 0
    }
  },
  computed: {
    ...mapGetters([types.COPYRIGHT, types.I18N])
  },
  created() {
    this.initDeveloperMode()
  },
  mounted() {
    this.$store.commit('CLEAN_WEBSOCKET_POOL')

    if (developerMode) {
      document
        .getElementById('myBtn')
        .addEventListener('click', this.openDeveloperMode)
    }
  },
  methods: {
    //关闭开发者模式
    closeMode() {
      this.developerModeVisible = false
      this.count = 0
      sessionStorage.setItem('developerMode', 0)
    },
    //初始化开发者模式
    initDeveloperMode() {
      if (developerMode) {
        switch (sessionStorage.getItem('developerMode')) {
          case '0': {
            this.developerModeVisible = false
            break
          }
          case '1': {
            this.developerModeVisible = true
            break
          }
        }
      }
    },
    //进入开发者模式验证密码
    developerModeVerification() {
      this.$prompt('', this.LANG.INTER_DEVELOPERMODE_PWD, {
        confirmButtonText: this.LANG.CONFIRM,
        cancelButtonText: this.LANG.CANCEL,
        closeOnClickModal: false,
        customClass: 'developerMode',
        inputValidator: function (val) {
          if (val) {
            return true
          } else {
            return false
          }
        },
        inputErrorMessage: this.LANG.ACCOUNT_PWD
      })
        .then(({ value }) => {
          if (value == developerPwd) {
            this.developerModeVisible = true
            sessionStorage.setItem('developerMode', 1)
          } else {
            this.$message.error(this.LANG.PASSWORD_ERROR)
          }
        })
        .catch(() => {})
    },
    //按钮点击15次，触发开发者模式
    openDeveloperMode() {
      if (!this.developerModeVisible && this.count == 0) {
        setTimeout(() => {
          if (this.count >= 15) {
            this.developerModeVerification()
          }

          this.count = 0
        }, 3000)
      }
      this.count++
    }
  }
}
</script>
<style lang="scss" scoped>
.loginPage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 760px;
  background: url('../../assets/img/login/login-bg.png') no-repeat 0 0;
  background-size: cover;
}

.langSet {
  position: absolute;
  top: 40px;
  right: 40px;
}

.copyright {
  position: absolute;
  bottom: 40px !important;
  width: 100%;
  margin-left: 0;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  color: #999;
}
</style>
<style lang="scss">
.fks-message-box.developerMode {
  width: 400px !important;
  height: 185px !important;
  padding: 0 !important;

  .fks-message-box__content {
    height: 90px !important;
    padding: 16px 16px 0 !important;
  }
}
</style>
